<link type="text/css" rel="stylesheet" href="/assets/home/css/style.css">
<link rel="stylesheet" href="/assets/home/css/comment_index.css">
<!-- 评分插件 -->
<link rel="stylesheet" href="/assets/home/plugin/raty/raty.css" />
<script src="/assets/home/plugin/raty/raty.min.js"></script>

<body>
    <div class="rank_header">
       <div class="title">
            <span>学员评论</h3>
       </div>
    </div>
    <div class="rank_box">
        {foreach $commentList as $item}
        <div class="item">
            <div class="footer" style="height: 100px;">
                <img class="mui-media-object mui-pull-left userimg" src="{$item.business.avatar_text}" style="margin-right: 20px;">
                <div class="price" style="display: flex; flex-direction: column;">
                    <span style="font-size: 15px; font-weight: normal;">{$item.business.nickname} <span style="color: rgb(14, 109, 233);">{$item.subject.title}</span>评价:</span>
                    {$item.content}
                    <div class="raty" data-raty="{$item.rate}" style="display: flex; flex-direction: row;"></div>
                </div>
            </div>
        </div>
        {/foreach}
    </div>
</body>

<script>

var rateList = Array.from(document.getElementsByClassName('raty'));

rateList.forEach(rate => {
    const raty = new Raty(rate, {
        score: rate.getAttribute('data-raty'), // 初始分数
        size: 10,
        starHalf: "/assets/home/plugin/raty/images/star-half.png", // 半星的图片的地址
        starOff: "/assets/home/plugin/raty/images/star-off.png",  // 空星的图片的地址
        starOn: "/assets/home/plugin/raty/images/star-on.png",  //满星的图片的地址
        halfShow: true,   //显示半星
        readOnly: true, //只读
    });
    raty.init()
});

</script>